<!doctype html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>用户登录界面</title>
	<link th:href="@{/css/styles.css}" rel="stylesheet">
	<link th:href="@{/css/jigsaw.css}" rel="stylesheet">
	<script th:src="@{/js/jigsaw.js}"></script>
	<script th:src="@{/js/libs/jquery.min.js}"></script>
	<script th:src="@{/js/libs/jquery.validate.min.js}"></script>
</head>
<body id="main">
	<div class="jq22-container" style="padding-top:100px">
		<div class="login-wrap">
			<div class="login-html">
				<input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">欢迎</label>
				<input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">登录</label>
				<div class="login-form">
					<div class="sign-in-htm" style="padding-top: 50%; text-align: center;font-size: xx-large">
						欢迎使用XX选课系统
					</div>
					<form id="form-login">
					<div class="sign-up-htm">
						<div class="group">
							<label class="label">姓名</label>
							<input id="name" name="name" value="ccb" type="text" class="input">
						</div>
						<div class="group">
							<label class="label">学号</label>
							<input id="id" name="id" value="333" type="text" class="input">
						</div>
						<div class="group">
							<label class="label">年级</label>
							<input id="grade" name="grade" value="大三" type="text" class="input">
						</div>
						<div class="group">
							<label class="label">专业</label>
							<input id="major" name="major" value="软件工程" type="text" class="input">
						</div>
						<div class="group">
							<label class="label">学院</label>
							<input id="institude" name="institude" value="计算机科学与技术学院" type="text" class="input">
						</div>
						<div class="group">
							<label class="label">密码</label>
							<input id="password" name="password" type="password"  value="333" class="input" data-type="password">
						</div>
						<div class="group">
							<input type="button" class="button" value="登录" onClick="login()">
						</div>
					</div>
					</form>
				</div>
			</div>
		</div>
	</div>	
	<script src="js/jigsaw.js"></script>
<script>
	$(function () {
		$("#form-login").validate({
			rules:{
				id:{
					required: true,
					digits: true
				},
				password:{
					required: true
				},
				name:{
					required: true
				},
				major:{
					required: true
				},
				grade:{
					required: true
				},
				institude:{
					required: true
				}
			},
			focusCleanup: true
		});
	});

	function login() {
		if($("#form-login").validate().form()){
			var formData = new FormData(document.getElementById('form-login'));
			$.ajax({
				url: "/login",
				type: 'post',
				data: formData,
				processData: false,
				contentType: false,
				success: function (res) {
					if(res.no != null){
						alert("验证成功");
						$.ajax({
							url: "/selectCourse",
							type: 'get',
							data: res,
							success: function (data) {
								$('#main').html(data);
							}
						})
					}else{
						alert("验证失败");
					}
				}
			})
		}

	}
</script>
</body>
</html>